<!--  -->
<template>
  <div class=''>
    <basic-container>
      <avue-form
        ref="form"
        v-model="obj"
        :option="option"
      >
        <template
          slot-scope="scope"
          slot="type"
        >
          <el-select
            @change="getprojectId"
            v-model="obj.type"
            placeholder="请选择缴费类型"
          >
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </template>
        <template
          slot-scope="scope"
          slot="buildingType"
        >
          <el-select
            @change="getprojectId"
            v-model="obj.buildingType"
            placeholder="请选择房产类型"
          >
            <el-option
              v-for="(item,index) in buildingTypeOptions"
              :key="index"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </template>
        <template
          slot-scope="scope"
          slot="arrearageTime"
        >
          <el-date-picker
            @change="getprojectId"
            v-model="obj.arrearageTime"
            type="month"
            placeholder="选择应缴月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </template>
        <template
          slot-scope="scope"
          slot="projectId"
        >
          <el-select
            v-model="obj.projectId"
            placeholder="请选择房产编号"
          >
            <el-option
              v-for="(item,index) in projectIdOptions"
              :key="index"
              :value="item.key"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </template>
        <template slot="menuForm">
          <el-button
            type="primary"
            icon="el-icon-picture-outline"
            @click="handleSubmit"
          >生 成</el-button>
          <el-button
            @click="handleEmpty"
            icon="el-icon-delete"
          >重 置</el-button>
          <el-button
            v-print="'#printCenter'"
            :disabled="url==''"
            icon='el-icon-printer'
          >打 印</el-button>
        </template>
      </avue-form>
      <div
        id="printCenter"
        ref="printCenter"
        style="width:100%"
      >
        <img
          v-if="url"
          :src="url"
          style="width:100%;height:100%;"
        >
      </div>
    </basic-container>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { optionForm } from "@/const/crud/market/calllist/index"
import { getDicType } from '@/api/common'
import { getSelect, getPrint } from '@/api/market/calllist/index'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      obj: {
        type: '',
        buildingType: '',
        arrearageTime: '',
        projectId: ''
      },
      option: optionForm,
      typeOptions: [],
      buildingTypeOptions: [],
      projectIdOptions: [],
      url: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getprojectId () {
      if (this.obj.type && this.obj.buildingType && this.obj.arrearageTime) {
        getSelect(this.obj).then(res => {
          this.projectIdOptions = res.data.data
          this.obj.projectId = ''
        })
      }
    },
    handleEmpty () {
      this.url = ''
      this.$refs.form.resetForm();
    },
    handleSubmit () {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          getPrint(this.obj).then(res => {
            this.url = res.data.data
          })
        }
      })
    },
    handlePrint () {
      if (this.url != '') {
        this.$print(this.$refs.printCenter)
      } else {
        this.$message.warning("请先生成信息后在打印")
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    getDicType('sys_pay_type').then(res => {
      this.typeOptions = res.data.data
    })
    getDicType('rm_project_buiding_type').then(res => {
      this.buildingTypeOptions = res.data.data
    })
  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
// 不让打印页眉页脚
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}

html {
  background-color: #ffffff;
  margin: 0px; /* this affects the margin on the html before sending to printer */
}

body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
</style>